<at-panel-body>
    <div class="at-List-toolbar">
        <smart-search
            class="at-List-search"
            django-model="jobs"
            base-path="{{vm.searchBasePath}}"
            iterator="job"
            list="vm.list"
            dataset="vm.job_dataset"
            collection="vm.jobs"
            search-tags="searchTags"
            search-bar-full-width="vm.isPortalMode">
        </smart-search>
    </div>
    <at-list-toolbar
        ng-if="vm.jobs.length > 0"
        on-expand="vm.onExpand"
        on-collapse="vm.onCollapse"
        is-collapsed="vm.isCollapsed"
        sort-only="false"
        sort-value="vm.toolbarSortValue"
        sort-options="vm.toolbarSortOptions"
        on-sort="vm.onToolbarSort">
    </at-list-toolbar>
    <at-list results="vm.jobs" empty-list-reason="{{ vm.emptyListReason }}">
        <!-- TODO: implement resources are missing red indicator as present in mockup -->
        <at-row ng-repeat="job in vm.jobs" id="job-{{ job.id }}" ng-class="vm.isCollapsed ? 'at-Row--collapsed' : ''">
            <div class="at-Row-items">
                <!-- TODO: include workflow tab as well -->
                <div class="at-Row-container">
                    <at-row-item
                        status="{{ job.status }}"
                        status-tip="{{ vm.strings.get('list.STATUS_TOOLTIP', vm.getTranslatedStatusString(job.status)) }}"
                        header-value="{{ job.id }} - {{ job.name }}"
                        header-state="{{ vm.getSref(job) }}"
                        header-tag="{{ vm.jobTypes[job.type] }}"
                        secondary-tag="{{ vm.getSecondaryTagLabel(job) }}">
                    </at-row-item>
                    <div class="at-Row-actions">
                        <at-relaunch job="job" ng-show="job.summary_fields.user_capabilities.start">
                        </at-relaunch>
                        <at-row-action icon="fa-minus-circle" ng-click="vm.cancelJob(job)" tooltip="{{ vm.strings.get('listActions.CANCEL', vm.strings.get('list.JOB')) }}"
                            ng-show="!vm.isPortalMode && (job.summary_fields.user_capabilities.start &&
                                 (job.status === 'pending' ||
                                 job.status === 'waiting' ||
                                 job.status === 'running')) || ($root.user_is_superuser && job.type === 'system_job' &&
                                 (job.status === 'pending' ||
                                 job.status === 'waiting' ||
                                 job.status === 'running'))">
                        </at-row-action>
                        <at-row-action icon="fa-trash" ng-click="vm.deleteJob(job)" tooltip="{{ vm.strings.get('listActions.DELETE', vm.strings.get('list.JOB')) }}"
                            ng-show="!vm.isPortalMode && job.summary_fields.user_capabilities.delete &&
                                 !(job.status === 'pending' ||
                                 job.status === 'waiting' ||
                                 job.status === 'running')">
                        </at-row-action>
                    </div>
                </div>
                <div class="at-Row-container--wrapped">
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_STARTED') }}"
                        value="{{ job.started | longDate }}">
                    </at-row-item>
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_FINISHED') }}"
                        value="{{ job.finished | longDate }}">
                    </at-row-item>
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_LAUNCHED_BY') }}"
                        value="{{ job.summary_fields.created_by.username }}"
                        value-link="/#/users/{{ job.summary_fields.created_by.id }}">
                    </at-row-item>
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_WORKFLOW_JOB') }}"
                        value="{{ job.summary_fields.source_workflow_job.name }}"
                        value-link="/#/workflows/{{ job.summary_fields.source_workflow_job.id }}">
                    </at-row-item>
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_JOB_TEMPLATE') }}"
                        value="{{ job.summary_fields.job_template.name }}"
                        value-link="/#/templates/job_template/{{ job.summary_fields.job_template.id }}">
                    </at-row-item>
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INVENTORY') }}"
                        value="{{ job.summary_fields.inventory.name }}"
                        value-link="/#/inventories/{{job.summary_fields.inventory.kind === 'smart' ? 'smart' : 'inventory'}}/{{ job.summary_fields.inventory.id }}">
                    </at-row-item>
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_PROJECT') }}"
                        value="{{ job.summary_fields.project.name }}"
                        value-link="/#/projects/{{ job.summary_fields.project.id }}">
                    </at-row-item>
                </div>
                <div class="at-Row-container--wrapped">
                    <at-row-item
                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
                        tag-values="job.summary_fields.credentials"
                        tags-are-creds="true">
                        <at-toggle-tag ng-init="credTags=vm.buildCredentialTags(job.summary_fields.credentials)" tags="credTags"></at-toggle-tag>
                    </at-row-item>
                    <labels-list class="LabelList" show-delete="false" is-row-item="true" state="job">
                    </labels-list>
                </div>
            </div>
        </at-row>
    </at-list>
    <paginate
        collection="vm.jobs"
        dataset="vm.job_dataset"
        iterator="job"
        base-path="{{vm.searchBasePath}}">
    </paginate>
</at-panel-body>
